<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>目录</title>
    <link rel="stylesheet" href="css/public/reset.css">
    <link rel="stylesheet" href="css/bootstrap.3.3.7.min.css">
    <link rel="stylesheet" href="css/public/header.css">
    <link rel="stylesheet" href="css/public/public.css">
    <link rel="stylesheet" href="css/catalogue/catalogue.css">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="images/public/logo.png" height="92" width="200"/>
                </a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="01.html">产品目录</a></li>
                    <li><a href="02.html">选型</a></li>
                    <li><a href="03.html">详细</a></li>
                    <li><a href="04.html">输出</a></li>
                    <li><a href="#">帮助</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            语言
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">中文</a></li>
                            <li><a href="#">English</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="my-container">
              <div class="my-aside">
                <h2>产品范围</h2>
                <ul>
                    <li @click="selectProduct(0)">
                        <div class="product-img">
                            <img src="images/catalogue/01.png" height="62" width="62"/>
                        </div>
                        <div class="product-text">
                            AC外转子轴流风机系列
                            <br>
                            AC AXIAL FAN
                        </div>
                    </li>
                    <li @click="selectProduct(1)" class="active-product">
                        <div class="product-img">
                            <img src="images/catalogue/02.png" height="62" width="62"/>
                        </div>
                        <div class="product-text">
                            AC外转子轴流风机系列
                            <br>
                            AC AXIAL FAN
                        </div>
                    </li>
                    <li @click="selectProduct(2)">
                        <div class="product-img">
                            <img src="images/catalogue/03.png" height="62" width="62"/>
                        </div>
                        <div class="product-text">
                            AC外转子轴流风机系列
                            <br>
                            AC AXIAL FAN
                        </div>
                    </li>
                    <li @click="selectProduct(3)">
                        <div class="product-img">
                            <img src="images/catalogue/04.png" height="62" width="62"/>
                        </div>
                        <div class="product-text">
                            AC外转子轴流风机系列
                            <br>
                            AC AXIAL FAN
                        </div>
                    </li>
                </ul>
            </div>
              <div class="main-box">
                <div class="product-contentImg">

                </div>
                <div class="text-explain">
                    <h3>Incorporation of International Standards into</h3>
                    <p>
                        We believe that innovation takes into account not only how to improve product
                        quality, but also take into account the productundefineds impact on the environment.
                    </p>
                </div>
                <div class="btn-box">
                    <button type="button" class="btn btn-primary">选型</button>
                </div>
            </div>
        </div>
</div>
<img class="bg-img" src="images/public/max-bg-03.png">
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    let vm = new Vue({
    el: '#app',
    methods:{
      //选中产品
        selectProduct(message){
            let my_aside_li = $('.my-aside li')
            my_aside_li.removeClass('active-product')
            my_aside_li.eq(message).addClass('active-product')
        }
        }
    })
    $('.nav>li>a').click(function () {
        $(this).css('color','#fff')
    })
</script>

</body>
</html>
